<template>
  <div>
    <div class="box">
      <van-tabs @change="onArticle">
        <van-tab
          :title="item.name"
          v-for="item in channelList "
          :key="item.id"
          :name="item.id"
        />
        <!-- <van-loading v-if="articlelistloading" /> -->
        <!-- <div>{{ articleList.length > 0 ? '' : '数据为空' }}</div> -->

        <van-icon
          class="find"
          name="search"
          @click="onsearch"
        />
        <div class="shadow" />
        <van-icon
          class="menu"
          name="orders-o"
        />
      </van-tabs>
    </div>
    <!-- 需修改 -->
    <!-- <main>
      <article-list :data="articleList" />
      <van-loading
        v-if="articlelistloading"
        class="loading"
        color="#1989fa"
      />
      <article-list
        v-else
        :data="articleList"
      />
    </main> -->

    <div class="wrapper">
      <!-- 循环获取的数据@click="onenter(item.art_id)" -->
      <div
        v-for="item in articleList"
        :key="item.art_id"
        class="box-style"
        @click="onenter(item.art_id)"
      >
        <!-- 判断语句 -->
        <div v-if="item.cover.type > 1">
          <div class="first">
            {{ item.title }}
            <br>
          </div>
          <!-- 循环图片 -->
          <img
            v-for="(image,i) in item.cover.images"
            :key="i"
            class="photo"
            :src="image"
          >
          <br>
          <!-- 文字排列 -->
          <div class="style">
            {{ item.aut_name }}
            {{ item.comm_count }}评论
            {{ getTime(item.pubdate) }}
          </div>
        </div>
        <!-- 判断语句 -->
        <div
          v-else
          class="second"
        >
          <!-- 文字排列 -->
          <div class="second-title">
            {{ item.title }}
            <br><br>
            <div class="style">
              {{ item.aut_name }}
              {{ item.comm_count }}评论
              {{ getTime(item.pubdate) }}
            </div>
          </div>
          <!-- 循环图片 -->
          <img
            v-for="(image,i) in item.cover.images"
            :key="i"
            class="photo"
            :src="image"
          >
        </div>
      </div>
    </div>
    <!-- <main>
      <article-list :data="articleList" />
      <van-loading
        v-if="articlelistloading"
        class="loading"
        color="#1989fa"
      />
      <article-list
        v-else
        :data="articleList"
      />
    </main> -->
  </div>
</template>
<script>
import moment from 'moment';
import axios from 'axios';
import { mapState, mapActions } from 'vuex';

export default {
  name: 'HomePage',
  data() {
    return {
      nav: [],
      articlelistloading: false,
    };
  },
  computed: {
    // 集中导入model层数据
    ...mapState('channel', [
      'channelList'
    ]),
    ...mapState('article', [
      'articleList'
    ]),

  },
  // async created() {
  //   const res = await axios({
  //     method: 'get',
  //     url: 'http://toutiao.itheima.net/v1_0/channels',
  //   })
  //     .then(res => res.data.data.channels)
  //     .catch(() => []);
  //   this.nav = res;
  // },
  methods: {
    onAdd() {
      this.$store.dispatch('increment');
    },
    getTime(timeStick) {
      return moment(timeStick).fromNow()
    },
    ...mapActions('channel', [
      'updatechannelList',
    ]),
    ...mapActions('article', [
      'updatearticleList',
    ]),
    onArticle(id) {
      this.updatearticleList(id);
    },
    onsearch() {
      this.$router.push('/search')
    },
    async updateArticleListWithLoading(id) {
      this.articlelistloading = true;
      await this.updatearticleList(id);
      this.articlelistloading = false;
    },
    onChannelChange(id) {
      this.updateArticleListWithLoading(id);
    },
    onenter(item) {
      this.$router.push({
        path: '/article-id',
        query: {
          q: item,
        }
      })
      console.log(item);
    },
  },

  created() {
    this.updatechannelList();
    this.updateArticleListWithLoading(0);
  },

  // async created() {
  //   this.articlelistloading = true;
  //   await this.updatechannelList();
  //   await this.updatearticleList(0);
  //   this.articlelistloading = false;
  // },
}
</script>
<style lang="less" scoped>
.wrapper {
  height: calc(100% - 44px);
  overflow: auto;
}
.box-style {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.second {
  display: flex;
  flex-direction: row;
}
.first {
  flex: 1;
  margin-bottom: 10px;
  width: 100%;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-right: 20px;
}
.second-title {
  width: 100%;
  overflow: hidden;
  // -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.photo {
    flex: 1;
    width: 110px;
    height: 90px;
    border-radius: 5px;
    margin-right: 5px;
}
.style {
  font-size: 13px;
  color: #999;
}

.box {
  position: relative;
}

.menu {
  font-size: 30px;
  text-align: center;
  line-height: 44px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 44px;
  height: 44px;
  background-color: white;
}

.find {
  font-size: 30px;
  text-align: center;
  line-height: 44px;
  position: absolute;
  right: 44px;
  top: 0px;
  width: 44px;
  height: 44px;
  background-color: white;
}

.shadow {
  position: absolute;
  right: 88px;
  top: 0px;
  width: 20px;
  height: 44px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2), white);
}
  main {
    padding: 0 8px;

    .loading {
      display: flex;
      justify-content: center;
      margin: 50px;
    }
      }
</style>
